<template>
	<div class="questionRow">
		<div class="questionHead">
			<div class="item" :class="{'active':acitveIndex == 0}" @click="tabClick(0)">
				评标专家
				<span class="lt"></span>
				<span class="rt"></span>
				<span class="lb"></span>
				<span class="rb"></span>
			</div>
			<div class="item" :class="{'active':acitveIndex == 1}" @click="tabClick(1)">
				招标代理
				<span class="lt"></span>
				<span class="rt"></span>
				<span class="lb"></span>
				<span class="rb"></span>
			</div>
		</div>
		<div class="questionBody" v-if="acitveIndex == 0">
			<div class="questionItem bg1">
				<div class="label">未按规定时间到场</div>
				<div class="block">
					<span class="arrow lt"></span>
					<span class="arrow rt"></span>
					<span class="arrow lb"></span>
					<span class="arrow rb"></span>
					<div class="chart">
						<el-progress :percentage="95" :stroke-width="13" :show-text="false"></el-progress>
					</div>
					<div class="val">10</div>
				</div>
			</div>
			<div class="questionItem bg2">
				<div class="label">未经许可擅离职守</div>
				<div class="block">
					<span class="arrow lt"></span>
					<span class="arrow rt"></span>
					<span class="arrow lb"></span>
					<span class="arrow rb"></span>
					<div class="chart">
						<el-progress :percentage="70" :stroke-width="13" :show-text="false"></el-progress>
					</div>
					<div class="val">8</div>
				</div>
			</div>
			<div class="questionItem bg3">
				<div class="label">查看他人评标终端</div>
				<div class="block">
					<span class="arrow lt"></span>
					<span class="arrow rt"></span>
					<span class="arrow lb"></span>
					<span class="arrow rb"></span>
					<div class="chart">
						<el-progress :percentage="50" :stroke-width="13" :show-text="false"></el-progress>
					</div>
					<div class="val">5</div>
				</div>
			</div>
		</div>
    <div class="questionBody" v-if="acitveIndex == 1">
      <div class="questionItem bg1">
        <div class="label">代理机构人员未清理现场</div>
        <div class="block">
          <span class="arrow lt"></span>
          <span class="arrow rt"></span>
          <span class="arrow lb"></span>
          <span class="arrow rb"></span>
          <div class="chart">
            <el-progress :percentage="95" :stroke-width="13" :show-text="false"></el-progress>
          </div>
          <div class="val">7</div>
        </div>
      </div>
      <div class="questionItem bg2">
        <div class="label">代理机构工作人员迟到</div>
        <div class="block">
          <span class="arrow lt"></span>
          <span class="arrow rt"></span>
          <span class="arrow lb"></span>
          <span class="arrow rb"></span>
          <div class="chart">
            <el-progress :percentage="70" :stroke-width="13" :show-text="false"></el-progress>
          </div>
          <div class="val">5</div>
        </div>
      </div>
      <div class="questionItem bg3">
        <div class="label">无故频繁外出</div>
        <div class="block">
          <span class="arrow lt"></span>
          <span class="arrow rt"></span>
          <span class="arrow lb"></span>
          <span class="arrow rb"></span>
          <div class="chart">
            <el-progress :percentage="50" :stroke-width="13" :show-text="false"></el-progress>
          </div>
          <div class="val">3</div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
	export default {
		name: "item",
		data() {
			return {
				acitveIndex: 0
			}
		},
		mounted() {

		},
		methods: {
			tabClick(index) {
				this.acitveIndex = index
			}
		},
	}
</script>

<style lang="scss" scoped>
	.questionRow {
		height: 100%;
		display: flex;
		flex-direction: column;
		padding: 30px 15px 14px;
		box-sizing: border-box;

		.questionHead {
			display: flex;
			margin-bottom: 8%;

			.item {
				color: #00B2FF;
				border: 1px solid rgba(0, 142, 222, 0.5);
				background-color: rgba(0, 115, 222, 0.13);
				opacity: .5;
				width: 90px;
				text-align: center;
				font-size: 14px;
				line-height: 26px;
				position: relative;
				margin-right: 20px;
				cursor: pointer;
				letter-spacing: 2px;

				span {
					width: 4px;
					height: 4px;
					position: absolute;
					border: 1px solid #00E0FF;
				}

				.lt {
					left: -1px;
					top: -1px;
					border-right-width: 0px;
					border-bottom-width: 0px;
				}

				.rt {
					right: -1px;
					top: -1px;
					border-left-width: 0px;
					border-bottom-width: 0px;
				}

				.lb {
					left: -1px;
					bottom: -1px;
					border-right-width: 0px;
					border-top-width: 0px;
				}

				.rb {
					right: -1px;
					bottom: -1px;
					border-left-width: 0px;
					border-top-width: 0px;
				}

				&.active {
					opacity: 1;
				}
			}
		}

		.questionBody {
			flex: 1;
			min-height: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.questionItem {
				display: flex;
				align-items: center;

				.label {
					color: #C9EFFF;
					font-size: 14px;
					width: 158px;
				}

				.block {
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					padding: 5px 12px 5px 8px;
					border: 1px solid transparent;
					position: relative;

					.arrow {
						width: 4px;
						height: 4px;
						position: absolute;
					}

					.lt {
						left: -1px;
						top: -1px;
						clip-path: polygon(0 0, 0 100%, 100% 0);
					}

					.rt {
						right: -1px;
						top: -1px;
						clip-path: polygon(0 0, 100% 0, 100% 100%);
					}

					.lb {
						left: -1px;
						bottom: -1px;
						clip-path: polygon(0 0, 0 100%, 100% 100%);
					}

					.rb {
						right: -1px;
						bottom: -1px;
						clip-path: polygon(0 100%, 100% 0, 100% 100%);
					}


					.chart {
						flex: 1;
						min-width: 0;

						::v-deep .el-progress-bar {
							.el-progress-bar__outer {
								border-radius: 0;
								background-color: transparent!important;

								.el-progress-bar__inner {
									border-radius: 0;
								}
							}
						}
					}

					.val {
						font-family: 'DIN-Bold';
						width: 22px;
						text-align: right;
					}
				}

				&.bg1 {
					.block {
						border-color: rgba(255, 119, 0, .22);
						.arrow {
							background-color: #FF7700;
						}

						.chart {
							::v-deep .el-progress-bar {
								.el-progress-bar__outer {
									.el-progress-bar__inner {
										background: linear-gradient(90deg, #FF7700 65.02%, #FFF2E7 100%);
									}
								}
							}
						}


						.val {
							color: #FF7700;
						}
					}
				}

				&.bg2 {
					.block {
						border-color: rgba(0, 194, 255, .22);

						.arrow {
							background-color: #00C2FF;
						}

						.chart {
							::v-deep .el-progress-bar {
								.el-progress-bar__outer {
									.el-progress-bar__inner {
										background: linear-gradient(90deg, #00B3FF 65.02%, #C6F1FF 100%);
									}
								}
							}
						}


						.val {
							color: #00C2FF;
						}
					}
				}

				&.bg3 {
					.block {
						border-color: rgba(92, 255, 33, .22);

						.arrow {
							background-color: #5CFF21;
						}

						.chart {
							::v-deep .el-progress-bar {
								.el-progress-bar__outer {
									.el-progress-bar__inner {
										background: linear-gradient(90deg, #5CFF21 65.02%, #E4FFDA 100%);
                                    }
								}
							}
						}


						.val {
							color: #5CFF21;
						}
					}
				}
			}
		}
	}
</style>
